<template>
	<view class="main" v-if="list.length>0">
		<view class="title">
			<view class="image">
				<image :src="data.image" style="height: 30rpx;width: 178rpx;" mode=""></image>
			</view>
			<view style="color: #333; font-size: 14px;">
				<!-- {{data.title}} -->
				<template v-if="data.type == 1">已注册 10000+ 会员</template>
				<template v-if="data.type == 2">已有 1000+ 中奖</template>
			</view>
		</view>
		<view class="yj-box" style="height: 150rpx; overflow: hidden;">
			<scroll-view :scroll-top="scrollTop" scroll-y style="height: 150rpx;" scroll-with-animation="true"
				@wheel="handleWheel" show-scrollbar="true">
				<view v-for="item in list" :key="item.id" class="scroll">
					<view class="avatar">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="nickname">
						<u-text mode="name" v-if="item.nickname" :text="item.nickname" format="encrypt"></u-text>
						<!-- {{item.nickname}} -->
					</view>
					<view class="phone" v-if="data.type==1">
						{{maskPhoneNumber(item.phone)}}
					</view>
					<view class="phone" v-if="data.type==2">
					  {{item.prizeName}}
					</view>
					
					
					<view class="text" v-if="data.type==1">
						<image src="https://qny.yijiumy.com/icon_yes.png"
							style="width: 22rpx;height: 22rpx;margin-right: 5rpx;" mode=""></image> 注册成功
					</view>
					<view class="text" v-if="data.type==2">
						<image src="https://qny.yijiumy.com/9%402x.png" style="width: 132.85rpx;height: 42.27rpx; margin-bottom: 8rpx;" mode=""></image>
						
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	// import vueSeamlessScroll from 'vue-seamless-scroll'
	export default {
		name: 'seamless',
		props: ['list', 'data'],
		data() {
			return {
				// list: [], // 假设列表中有10个元素
				scrollTop: 0, // 初始滚动位置为0
				distance: 40,
				timer: null
			}
		},
		methods: {
			Interval() {
				this.distance = this.rpxTopx(75)
				this.timer = setInterval(() => {
					// 每隔1秒钟更新scrollTop属性的值
					this.scrollTop += this.distance; // 假设每次滚动20像素
					if (this.scrollTop >= this.distance * this.list.length) {
						// 如果滚动到底部了，重新从顶部开始滚动
						this.scrollTop = 0;
					}
				}, 2000);
			},
			clear() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},

			maskPhoneNumber(phoneNumber) {
				return phoneNumber ? phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '';
			},
			handleWheel(event) {
				// 阻止滚轮事件的默认行为，即忽略鼠标滚轮滚动
				event.preventDefault();
			},
			rpxTopx(rpx) {

				let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度

				let px = (deviceWidth / 750) * Number(rpx)

				return Math.floor(px);

			},
			pxToRpx(px) {
				// 假设设计稿宽度为750px
				const designWidth = 750;
				// 获取当前屏幕的宽度
				const screenWidth = wx.getSystemInfoSync().windowWidth;
				// 转换比例
				const ratio = screenWidth / designWidth;
				// 转换函数
				return Math.round(px * ratio);
			}
		}
	}
</script>

<style scoped lang="less">
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		pointer-events: none;
	}

	.scroll-view {
		-ms-overflow-style: none;
		/* 针对IE、Edge浏览器 */
		scrollbar-width: none;
		/* 针对Firefox浏览器 */
	}

	.main {
		width: calc(100% - 60rpx);
		margin: auto;
		height: 200rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		background: url(https://qny.yijiumy.com/pic_xyh_bj%403x.png) no-repeat;
		background-size: cover;

		.title {
			height: 50rpx;
			line-height: 30rpx;
			padding: 10rpx 0;
			display: flex;

			.image {
				margin-right: 42rpx;
			}
		}
		
		.nickname {
			width: 100rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			font-size: 13px;
			margin-right: 15rpx;
		}
		.phone{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 13px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			color: #333333;
			margin-right: 15rpx;
			width: 210rpx;
		}
		.avatar {
			margin-right: 15rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
			}
		}

		.scroll {
			display: flex;
			justify-content: space-between;
			height: 75rpx;
			padding: 13.5rpx 15rpx;
			line-height: 48rpx;
			align-items: center;
			// padding: 5rpx 0;
		}
	}

	.yj-box {
		position: relative;

	}

	.yj-box::after {
		content: "";
		position: absolute;
		width: 100%;
		// height: 100%;
		top: 0;
		left: 0;
		bottom: 0;
		background: transparent;
		z-index: 9;
	}
</style>